<template>
<div>
  <van-nav-bar
      @click-left="$router.go(-1)"
      style="backgroundColor: rgb(33, 185, 122)"
    >
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <p style="color:white">地图找房</p>
      </template>
    </van-nav-bar>
  <baidu-map class="bm-view" :center="$store.state.currentcity" :scroll-wheel-zoom="true" >
     <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" type="BMAP_NAVIGATION_CONTROL_LARGE"></bm-navigation>
     <bm-label v-for="(item,index) in datalvl1" :key="index" @click="deepKnown(item.value)"
     :content="item.label+'<br>'+item.count" :position="{lng: item.coord.longitude, lat: item.coord.latitude}" :labelStyle="{
                border: '1px #fff solid',
                color: '#fff',
                fontSize: '14px',
                textAlign: 'center',
                background: '#fff',
                width: '66.9px',
                height: '51.9px',
                borderRadius: '50%',
                background: '#1cb676',
                lineHeight: '20px',
                padding: '15px 0 0 0',
              }" title="Hover me"/>
  </baidu-map>
</div>
</template>

<script>
// 获取当前城市value值，获取地区信息
import { getAreaMap, getCityInfo } from '@/api/area'
export default {
  data () {
    return {
      datalvl1: []
    }
  },
  async created () {
    const res = await getCityInfo(this.$store.state.currentcity)
    const id = res.body.value
    console.log(res)
    const { body } = await getAreaMap(id)
    this.datalvl1 = body
  },
  methods: {
    async deepKnown (value) {
      const { body } = await getAreaMap(value)
      this.datalvl1 = body
    }
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 675px;
}
</style>
